<template>
  <div class="commission">
    <dt-search ref="search" :labelWidth="labelWidth" :xl="5" :xlBtn="4" @reset="resetFun" />

    <!-- <Tabs v-model="status" type="card" :animated="false" @on-click="onChange"> -->
    <Tabs v-if="name !== 'incentiveMar'" v-model="status" type="card" :animated="false" @on-click="onChange">
      <TabPane label="待审批" name="0"></TabPane>
      <TabPane label="已通过" name="1"></TabPane>
      <TabPane label="已驳回" name="2"></TabPane>
    </Tabs>

    <dt-grid ref="table" :columns="columns" page :onFetch="onFetch" />
    <process-modal ref="process" />
  </div>
</template>

<script>
  import columnOpt from './opt/column.js'
  import searchOpt from './opt/search.js'
  import auditMgr from '@/biz/flowApproval/processAudit.js'
  import processModal from '@/components/biz/audit/process-modal.vue'
  import billMgr from '@/biz/bonus/bill'
  import dt from '@dt/dt'

  let instanceId = null
  export default {
    components: {
      processModal
    },
    data() {
      let name = this.$route.name
      return {
        name,
        columns: [],
        status: '0',
        labelWidth: 100
      }
    },
    watch: {
      $route(to, from) {
        let retainParams = dt.memory.get('incentiveMar')

        if (to.name === 'incentiveMar') {
          this.$refs.search.init(this.$refs.table, searchOpt.options(this.name), {
            orgId: [],
            headerType: '',
            state: retainParams?.state,
            housesId: retainParams?.housesId,
            companyId: retainParams?.companyId,
            housesName: retainParams?.housesName
          })
          this.$refs.table.fetch()
        }
      }
    },
    mounted() {
      let retainParams = dt.memory.get('incentiveMar')

      this.status = this.$route.params.tabCheck || '0'
      instanceId = this.$route.params.businessId || instanceId
      this.columns = columnOpt.options(this.status, this.name, this)
      this.$refs.table.init(this)
      this.$refs.search.init(this.$refs.table, searchOpt.options(this.name), {
        orgId: [],
        housesId: retainParams?.housesId,
        companyId: retainParams?.companyId,
        housesName: retainParams?.housesName,
        headerType: '',
        state: this.name === 'incentiveMar' ? retainParams?.state : null
      })
      this.$refs.table.fetch()
    },
    methods: {
      onChange() {
        this.columns = columnOpt.options(this.status, this.name, this)
        this.$refs.table.init(this)
        this.$refs.table.fetch(true)
      },
      onAudit(item) {
        console.log(item, '审批')
        billMgr.isCanApproveBonus(item.housesId).then((res) => {
          this.$router.push({
            path:
              this.name == 'caseIncentiveApprove' ? 'caseIncentiveApprove/detail' : 'incentiveApprove/detail',
            query: {
              auditId: item.auditId,
              businessId: item.businessId,
              headerId: item.businessId,
              housesId: item.housesId,
              flag: 'audit'
            }
          })
        })
      },
      onDetail(item) {
        this.$router.push({
          path:
            this.name == 'caseIncentiveApprove'
              ? 'caseIncentiveApprove/detail'
              : this.name == 'incentiveMar'
              ? 'incentiveApproveMar/detail'
              : 'incentiveApprove/detail',
          query: {
            headerId: item.businessId,
            flag: 'details'
          }
        })
      },
      onFlow(data) {
        this.$refs.process.show({
          ...data,
          auditType: 4
        })
      },
      resetFun() {
        instanceId = null
        dt.memory.remove('incentiveMar')
        this.$refs.search.init(this.$refs.table, searchOpt.options(this.name), {
          orgId: [],
          housesId: '',
          headerType: '',
          state: this.$route.name === 'incentiveMar' ? '' : null
        })
      },
      onFetch(data) {
        // 待办任务跳转
        data.instanceId = instanceId
        if (this.name == 'caseIncentiveApprove') {
          data.housesId = this.$dt.buildInfo().housesId
        }

        dt.memory.get('incentiveMar')?.UContainSelf !== undefined &&
          (data.containSelf = !dt.memory.get('incentiveMar'))

        return auditMgr.list({
          ...data,
          auditType: 4,
          buttonType: this.name === 'incentiveMar' ? '-1' : this.status
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .commission {
    padding: 20px;

    .title {
      margin-bottom: 20px;
      font-size: 20px;
    }

    .info {
      line-height: 2;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

      p {
        width: 40%;

        span {
          display: inline-block;
          width: 100px;
          margin-right: 10px;
          text-align: right;
        }

        em {
          font-style: normal;
        }
      }
    }
  }

  .qie {
    // margin-top: 20px;
  }
</style>
